<template>
  <div class="recommend content" ref="scrollEle">
    <GoodsItem v-for="goods in recommendGoodsList" :key="goods._id" :goods="goods" @click.native="showToast"/>
    <div class="tip" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
         infinite-scroll-distance="20">{{tip}}</div>
    <div class="go-top" :class="{active: flag}" @click="goTop">
      <span class="top">顶部</span>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui';
  import {mapState} from 'vuex';
  import {GET_RECOMMEND_GOODS_LIST, GET_RECOMMEND_MORE_GOODS} from "../../store/mutation-types";
  import GoodsItem from "../../components/GoodsItem";

  export default {
    name: "Recommend",
    components: {GoodsItem},
    data() {
      return {
        busy: true,
        total: 200,
        limit: 20,
        flag: false,
        isScrolling: false,
      };
    },
    computed: {
      ...mapState(['recommendGoodsList']),
      tip() {
        return this.$store.state.recommendGoodsList.length === this.total + this.limit ? '已无更多数据' : '正在加载数据';
      }
    },
    methods: {
      loadMore: function () {
        this.busy = true;
        let length = this.$store.state.recommendGoodsList.length - 20;
        if (length === this.total) return;
        this.$store.dispatch(GET_RECOMMEND_MORE_GOODS, {
          offset: length,
          limit: this.limit
        }).then(() => this.busy = false);
      },
      goTop() {
        if (!this.isScrolling) {
          this.isScrolling = true;
          let step = this.$refs.scrollEle.scrollTop / 50;
          let timerId;
          let scrolling = () => {
            if (this.$refs.scrollEle.scrollTop - step <= 0) {
              this.$refs.scrollEle.scrollTop = 0;
              this.isScrolling = false;
            } else {
              this.$refs.scrollEle.scrollTop -= step;
              this.timerId = setTimeout(scrolling, 5);
            }
          };
          scrolling();
        }
      },
      bindEvent() {
        this.$refs.scrollEle.addEventListener('scroll', (e) => {
          this.flag = e.target.scrollTop > e.target.clientHeight;
        });
      },
      showToast() {
        this.toastInstance && this.toastInstance.close();
        this.toastInstance = Toast({
          message: '由于缺少商品详情数据，故该功能未实现',
          position: 'bottom',
          duration: 2000
        });
      },
    },
    mounted() {
      this.$store.dispatch(GET_RECOMMEND_GOODS_LIST).then(() => this.busy = false);
      this.bindEvent();
    }
  }
</script>

<style scoped lang='scss'>
  .recommend {
  }
  .tip {
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #58595b;
  }
  .go-top {
    position: fixed;
    right: 20px;
    bottom: -64px;
    width: 42px;
    height: 42px;
    opacity: 0;
    background: url();
    background-size: contain;
    z-index: 2;
    transition: all .8s ease-out;
    &.active {
      bottom: 64px;
      opacity: 1;
    }
    .top {
      position: absolute;
      bottom: 7px;
      width: 100%;
      height: 12px;
      line-height: 12px;
      text-align: center;
      font-size: 10px;
      color: #333;
    }
  }
</style>
